<template>
    <div class="box">
        <el-card class="card animated bounceInDown">
            <div class="card-content">
              <ul>
                <li><i class="iconfont icon-zuoxixingming"></i>姓名： 余航</li>
                <li><i class="iconfont icon-suoshuzhiwei"></i>职位： 前端开发工程师</li>
                <li><i class="iconfont icon-ruzhishijian"></i>入职时间： 2020年5月18日</li>
                <li><i class="iconfont icon-web-icon-"></i>所在部门： 三次元研发部</li>
              </ul>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'selfIntroduction'
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .card {
     padding: 10px;
     width: 60vw;
     margin-bottom: 5vh;
     background: #88b8ce59;
     .card-content {
        display: flex;
        justify-content: left;
        align-items: center;
        ul {
          list-style: none;
          li {
            height: 8vh;
            line-height: 8vh;
          }
          .iconfont {
            margin-right: 1vw;
            color: #03a9f4;
          }
          .icon-ruzhishijian, .icon-web-icon- {
            font-size: 4.3vh;
            margin-right: 0.5vw;
          }
        }
     }
    }
}
</style>
